// 用户协议
class Protocol{
    constructor(){
        this.not = document.querySelector(".notice");
        this.mask = document.querySelector(".mask");
        this.agree = document.querySelector(".agree");
        this.addEvent();
    }
    addEvent(){
        this.agree.addEventListener("click",()=>{
            this.hide();
        })
    }
    hide(){
        this.not.style.display = "none";
        this.mask.style.display = "none";
    }
}
new Protocol();
// 手机号的验证
class Registered{
    constructor(){
        this.otel = document.getElementById("tel");
        // 获取焦点的事件源
        this.oretr = document.querySelector(".retrieve");
        // 手机号不正确的事件源
        this.oerr = document.querySelector(".note_error");
        // 手机号为空的事件源
        this.oair = document.querySelector(".note_error_air");
        // 手机号已经注册的事件源
        this.oreg = document.querySelector(".note_error_registered");
        this.addEvent();
    }
    addEvent(){
        this.otel.addEventListener("focus",()=>{
            this.oretr.style.display = "block";
            this.oreg.style.display = "none";
            this.oair.style.display = "none";
            this.oerr.style.display = "none";
            this.otel.style.borderColor = "#666";
            this.otel.style.color = "#666";
        })
        this.otel.addEventListener("blur",()=>{
            this.frame();
        })
    }
    frame(){
        let verifi = /^1[3|4|5|6|7|8|9]\d{9}$/;
            this.oretr.style.display = "none";
            this.oreg.style.display = "none";
            this.oair.style.display = "none";
            this.oerr.style.display = "none";
        if(this.otel.value === ""){
            this.oretr.style.display = "none";
            this.oreg.style.display = "none";
            this.oair.style.display = "block";
            this.oerr.style.display = "none";
            this.otel.style.borderColor = "#F5222D";
        }else if(verifi.test(this.otel.value)){
            this.oretr.style.display = "none";
            this.oreg.style.display = "none";
            this.oair.style.display = "none";
            this.oerr.style.display = "none";
            this.otel.style.borderColor = "#52C41A";
        }else{
            this.oretr.style.display = "none";
            this.oreg.style.display = "none";
            this.oair.style.display = "none";
            this.oerr.style.display = "block";
            this.otel.style.borderColor = "#F5222D";
            this.otel.style.color = "#F5222D";
        }
    }
}
new Registered();
// 其他输入框为空时
class IsEmpty{
    constructor(){
        this.otel = document.getElementById("tel");
        // 图片验证码
        this.oimg_verify = document.getElementById("verify_code");
        // 短信验证码
        this.verify_code = document.getElementById("verifyication_code");
        this.btn = document.querySelector(".tel_verify_conde button");
        this.addEvent(this.oimg_verify);
        this.addEvent(this.verify_code);
    }
    addEvent(ele){
        ele.addEventListener("focus",()=>{
            ele.style.borderColor = "#666";
            ele.style.color = "#666";
        })
        ele.addEventListener("blur",()=>{
            this.frame(ele);
            this.code();
        })
    }
    code(){
        let verifi = /^1[3|4|5|6|7|8|9]\d{9}$/;
        if(this.otel.value !== "" || verifi.test(this.otel.value)){
            this.btn.type = "submit";
            this.btn.style.backgroundColor = "#fff";
            this.btn.style.color = "#666";
            this.btn.style.cursor = "pointer";
        }
    }
    frame(ele){
        if(ele.value === ""){
            ele.style.borderColor = "#F5222D";
            ele.style.color = "#F5222D";
        }else{
            ele.style.borderColor = "#52C41A";
        }
    }
}
new IsEmpty();
// 密码强度加判断两次密码输入的是否一致
class Strength{
    constructor(){
        this.opass = document.getElementById("password");
        this.ore_enter_pass = document.getElementById("re_enter_pass");
        this.wk = document.querySelector(".weak_bar");
        this.mde = document.querySelector(".middle_bar");
        this.sog = document.querySelector(".strong_bar");
        this.oimg_code= document.querySelector(".verify_img");
        this.note_err = document.querySelector(".note_error_pass");
        this.note_re_pass = document.querySelector(".note_error_re_pass");
        this.addEvent();
    }
    addEvent(){
        // 密码的正则
        this.opass.addEventListener("focus",()=>{
            this.opass.style.borderColor = "#52C41A";
            this.note_err.style.display = "none";
        })
        this.opass.addEventListener("blur",()=>{
            this.empty();
        })
        this.opass.addEventListener("input",()=>{
            this.frame();
        })
        // 测试两次密码是否相同
        this.ore_enter_pass.addEventListener("focus",()=>{
            this.ore_enter_pass.style.borderColor = "#52C41A";
            this.note_re_pass.style.display = "none";
        })
        this.ore_enter_pass.addEventListener("blur",()=>{
            this.isItConsistent();
        })
        this.ore_enter_pass.addEventListener("input",()=>{
            this.isItConsistent();
        })
        // 随机图片验证码
        this.oimg_code.addEventListener("click",()=>{
            this.PicVerifi();
        })
    }
    PicVerifi(){
        if(Math.random()<0.2){
            this.oimg_code.src = "./images/VerificationCode.jpg";
        }else if(Math.random()<0.4){
            this.oimg_code.src = "./images/VerificationCode2.jpg";
        }else if(Math.random()<0.6){
            this.oimg_code.src = "./images/VerificationCode3.jpg";
        }else if(Math.random()<0.8){
            this.oimg_code.src = "./images/VerificationCode4.jpg";
        }else if(Math.random()<1){
            this.oimg_code.src = "./images/VerificationCode5.jpg";
        }
    }
    frame(){
        let pword = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`·！……（）——+《》？“：「」】【、￥!,@#$%^&*?_\\>\\<\~\;\:\=\[\]\{\}\(\)\+\\\/\?\.\|\-])[A-Za-z\d`·！……（）——+《》？“：「」】【、￥!,@#$%^&*?_\\>\\<\~\;\:\=\[\]\{\}\(\)\+\\\/\?\.\|\-]{8,20}/;
        var weak= 0, middle = 0, strong = 0;
        let str = this.opass.value;
        if(pword.test(this.opass.value) || this.opass.value !== "" || this.opass.value.length<9){
            for(let i=0;i<str.length;i++){
                if(str[i].charCodeAt() >= 97 && str[i].charCodeAt() <= 122 || str[i].charCodeAt() >= 65 && str[i].charCodeAt() <= 90){
                    weak=1;
                }else if(str[i] >= 0 && str[i] <= 9){
                    middle=1;
                }else{
                    strong=1;
                }
            }
            this.wk.style.backgroundColor = this.mde.style.backgroundColor = this.sog.style.backgroundColor = "#ddd";
            switch(weak + middle + strong){
                case 1:
                    this.wk.style.backgroundColor = "#FAAD14"; 
                    break;
                case 2:
                    this.wk.style.backgroundColor = "#ddd";
                    this.mde.style.backgroundColor = "#1890FF"; 
                    break;
                case 3:
                    this.mde.style.backgroundColor = "#ddd";
                    this.sog.style.backgroundColor = "#52C41A"; 
                    break;
            }
        }
    }
    empty(){
        if(this.opass.value === "" || this.opass.value.length<8){
            this.note_err.style.display = "block";
            this.opass.style.borderColor = "#F5222D";
        }
    }
    isItConsistent(){
        if(this.opass.value !== this.ore_enter_pass.value){
            this.note_re_pass.style.display = "block";
            this.ore_enter_pass.style.borderColor = "#F5222D";
        }else{
            this.note_re_pass.style.display = "none";
            this.ore_enter_pass.style.borderColor = "#52C41A";
        }
    }
}
new Strength();
// 注册
class Register{
    constructor(){
        this.user = document.getElementById("tel");
        this.pass = document.getElementById("re_enter_pass");
        this.smt = document.getElementById("submit");
        this.name = location.search.split("=")[1];
        this.url = "http://localhost:2926/api";
        this.addEvent();
        this.user.value = this.name;
    }
    addEvent(){
        this.smt.addEventListener("click",()=>{
            this.ajax();
        })
    }
    ajax(){
        ajaxGet(this.url,(res)=>{
            this.res = JSON.parse(res);
            if(this.res.code === 0){
                alert("用户名重复");
                this.user.value = "";
                this.user.focus();
            }else if(this.res.code === 2){
                if(confirm("注册成功，是否去登录？")){
                    location.href = "./login.html"
                }
            }
        },{
            type:"registered",
            username:this.user.value,
            password:this.pass.value
        })
    }
}
new Register();